<template>
  <div id="show-blogs">
     <h1>博客总览</h1>
     <div v-for="blog in blogs" class="single-blog">
       <h2>{{ blog.title }}</h2>
       <article>{{ blog.body }}</article>
     </div>
  </div>
</template>
<script>
export default {
  name: 'show-blogs',
  data(){
    return{
       blogs:[],
    }
  },
  //请求数据
  created(){
    // 如果是本地的json文件，就要把json放在static目录下
    this.$http.get('http://jsonplaceholder.typicode.com/posts')
    .then(function(data){
     this.blogs =   data.body.slice(0,10);
     console.log(this.blogs);
    })
  }
}
</script>
<style>
#show-blogs{
  max-width: 800px;
  margin: 0 auto;
}
.single-blog{
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  background: #eee;
}
</style>
